<template>
  <div>
    <!-- <p>{{blogDetail}}</p> -->
    <a-form-model
      layout="horizontal"
      :model="blogDetail"
      v-bind="{
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      }"
    >
      <a-form-model-item label="博客标题">
        <a-input v-model="blogDetail.title" />
      </a-form-model-item>
      <a-form-model-item
        class="bloginfo"
        v-if="this.user.type === '2'"
        label="博客信息"
      >
        <span style="margin-right:1rem;"
          >博客点赞数:{{ blogDetail.like_count }}</span
        >
        <span style="margin-right:1rem;"
          >博客阅读量:{{ blogDetail.read_count }}</span
        >
        <span style="margin-right:1rem;"
          >博客评论量:{{ blogDetail.comment_count }}</span
        >
      </a-form-model-item>
      <a-form-model-item v-else label="博客类型">
        <a-checkbox-group
          :options="classifyData"
          :default-value="defaultValue"
          class="inner-item"
        >
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="封面图片">
        <img
          v-if="blogDetail.cover"
          :src="blogDetail.cover"
          class="uploadImg"
          alt=""
        />
      </a-form-model-item>
      <a-form-model-item label="文章内容">
        <wangEditor v-model="blogDetail.content" :disabled="false"></wangEditor>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import wangEditor from '@/pages/components/wangEditor/index.vue';
import { blogDetailApi } from '@/services/blogApi/blog';
// import { superAdminBlogListApi } from '@/services/superAdmin';
import { classifyListApi } from '@/services/blogApi/classify';
export default {
  components: { wangEditor },
  data() {
    return {
      blogId: 0,
      projectId: 0,
      blogDetail: {},
      classifyNum: 0,
      defaultValue: [], //选中的分类数组
      classifyData: [],
      uploadUrl: '',
      uploadData: {},
      headers: {},
    };
  },
  async mounted() {
    if (this.user.type === '2') {
      this.admin();
    } else {
      this.superAdmin();
    }
  },
  computed: {
    ...mapGetters('account', ['user']),
  },
  methods: {
    async getAllClassify() {
      let res = await classifyListApi({
        projectId: this.projectId,
      });
      this.classifyData = res.data.rows;
      this.classifyData = this.classifyData.map((item) => {
        return {
          label: item.classifyName,
          value: item.id,
        };
      });
    },
    async superAdmin() {
      // this.blogId = this.$route.params.id - 0;
      // let res = await superAdminBlogListApi({
      //   id: this.blogId,
      // });
      // this.blogDetail = res.data;
    },
    async admin() {
      this.projectId = this.user.project_id;
      this.blogId = this.$route.params.id - 0;
      let res = await blogDetailApi({
        id: this.blogId,
        projectId: this.projectId,
      });
      this.blogDetail = res.data;
      this.getAllClassify();

      this.blogDetail.b_blogClassifies.forEach((ele) => {
        this.defaultValue.push(ele.classifyId);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.upload {
  width: 5rem;
  height: 5rem;
  border: solid;
}
.uploadImg {
  // width: 10rem;
  height: 10rem;
}
</style>
